<template>
  <div style="margin: 0 20px">
    <HuilanBasicToolbar style="margin-top: 0">
      <el-button
        type="primary"
        size="small"
        @click="addLabelFlag = true"
      >
        {{ $t("aiCenter.sensitiveWords.addLabel") }}</el-button
      >
      <el-button
        type="danger"
        size="small"
        @click="handleCommand('deleteBatchs')"
      >{{ $t("aicosCommon.batchDeleteBtn") }}</el-button
      >
    </HuilanBasicToolbar>
    <HuilanBasicSearchbar
      :model="searchForm"
      :fields="searchFieldList"
      @reset="searchReset"
      @search="searchChange"
    >
    </HuilanBasicSearchbar>
    <avue-crud
      :option="option"
      :search.sync="query"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :page.sync="page"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="menu" slot-scope="{ row, size, type }">
        <el-button
          :type="type"
          :size="size"
          @click.stop="handleCommand('editRow',row)"
        >{{ $t("aicosCommon.editBtn") }}</el-button
        >
<!--        <el-button-->
<!--          :type="type"-->
<!--          :size="size"-->
<!--          @click.stop="handleCommand('pauseRow',row)"-->
<!--        >{{ $t("aicosCommon.pause") }}</el-button-->
<!--        >-->
        <el-button
          :type="type"
          :size="size"
          @click.stop="handleCommand('delRow',row)"
        >{{ $t("aicosCommon.delBtn") }}</el-button
        >
      </template>
    </avue-crud>
    <!-- 新增编辑标签   -->
    <QSGDrawer
      :title="$t('aiCenter.sensitiveWords.sensitiveWordLabel')"
      :visible.sync="addLabelFlag"
      size="600px"
      :before-close="beforeClose"
      :fullscreen="false"
      :showFull="false"
      :wrapperClosable="false"
      :modalAppendToBody="true"
    >
      <el-form
        style="margin: 0 20px 0 0"
        v-if="addLabelFlag"
        :model="labelFormData"
        ref="labelFormDataRef"
        label-width="120px"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item
          :label="$t('aiCenter.sensitiveWords.labelName')"
          prop="labelName"
          :rules="[
            {
              required: true,
              message: $t('aiCenter.sensitiveWords.labelNameTip'),
            },
            {
              pattern: /^[A-Za-z0-9\u4E00-\u9FA5\r\n]+$/,
              message: $t('aiCenter.sensitiveWords.onlyRuleTip'),
            },
          ]"
        >
          <el-input
            :placeholder="$t('aiCenter.sensitiveWords.labelNameTip')"
            type="input"
            v-model="labelFormData.labelName"
            autocomplete="off"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('aiCenter.sensitiveWords.describe')"
          prop="sensitiveWord"
          :rules="[
            {
              pattern: /^[A-Za-z0-9\u4E00-\u9FA5]+$/,
              message: $t('aiCenter.sensitiveWords.onlyRuleTip'),
            },
          ]"
        >
          <el-input
            :placeholder="$t('aiCenter.sensitiveWords.describeTip')"
            type="textarea"
            :autosize="{ minRows: 4 }"
            v-model="labelFormData.describe"
            autocomplete="off"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button size="small" type="primary" :loading="finishedFlag" @click="addEditLabel()">{{
            $t("aicosCommon.saveBtn")
          }}</el-button>
        <el-button size="small" :loading="finishedFlag" @click="addLabelFlag = false">{{
            $t("aicosCommon.cancelBtn")
          }}</el-button>
      </template>
    </QSGDrawer>
  </div>
</template>
<script>
import QSGDrawer from "@/components/QSGDrawer/index";
import {getAiNlpLableList,saveOrUpdate,deleteAiNlpLable} from "@/api/aiCenter/thesaurusMgr/sensitiveWords";

export default {
  components: {
    QSGDrawer
  },
  data() {
    return {
      addLabelFlag: false,
      searchForm: {
        labelName:'',
      },
      searchFieldList: [
        {
          prop: "labelName",
          placeholder:
            this.$t("aicosCommon.pleaseInput") +
            this.$t("aiCenter.sensitiveWords.labelName"),
        },
      ],
      loading: true,
      page: {
        size: 10,
        pageSizes: [10, 30, 50, 100, 200],
        current: 1,
        total: 0,
      },
      query: {},
      data: [],
      option: {
        // title: "敏感词列表",
        tip: false,
        header: false,
        align: "left",
        // index: true,
        border: false,
        menuAlign: "center",
        excelBtn: false,
        selection: true,
        searchSpan: 8,
        searchMenuSpan: 4,
        menuWidth: 150,
        rowKey: "id",
        addBtn: false,
        delBtn: false,
        editBtn: false,
        searchMenuPosition: "left",
        dialogWidth: "40%",
        dialogType: "drawer",
        dialogCustomClass: "huilan-drawer-form",
        emptyText: this.$t("aicosCommon.notData"),
        column: [
          {
            label: this.$t("aiCenter.sensitiveWords.labelName"),
            prop: "name",
            // search: true,
            searchSpan: 6,
            type: "textarea",
            searchLabelWidth: 60,
            span: 24,
            minlength: 1,
            maxlength: 30,
            labelWidth: 100,
            rules: [
              {
                required: true,
                message:
                  this.$t("aicosCommon.pleaseInput") +
                  this.$t("aiCenter.sensitiveWords.labelName"),
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: this.$t("aiCenter.sensitiveWords.labelStatus"),
          //   prop: "labelStatus",
          //   span: 24,
          //   width: 150,
          // },
          {
            label: this.$t("aiCenter.sensitiveWords.describe"),
            prop: "remark",
            type: "textarea",
            span: 24,
            // width: 150,
            maxlength: 200,
            showWordLimit: true,
          },
        ],
      },
      selectionList: [],
      labelFormData: {
        id: '',
        labelName: '',
        describe: '',

      },
      addEditType: '',
      finishedFlag: false,
    }
  },
  methods: {
    onLoad() {
      this.loading = true;
      let obj = {
        size: this.page.pageSize,
        current: this.page.currentPage,
        name: this.searchForm.labelName,
      };
      getAiNlpLableList(obj).then((res) => {
        if (res.data.code === 200) {
          this.data = res.data.data.records;
          this.page.total = res.data.data.total;
          this.loading = false;
        }
      });
    },
    handleCommand(command, row) {
      if(command == 'editRow') {
        this.addEditType = 'edit'
        this.labelFormData.id = row.id
        this.labelFormData.labelName = row.name
        this.labelFormData.describe = row.remark
        this.addLabelFlag = true
      } else if(command == 'pauseRow') {

      } else if(command == 'delRow') {
        this.$confirm(this.$t("aiCenter.sensitiveWords.delTip"), {
          confirmButtonText: this.$t("aicosCommon.confirmBtn"),
          cancelButtonText: this.$t("aicosCommon.cancelBtn"),
          type: "warning",
        })
          .then(() => {
            return deleteAiNlpLable({ids:row.id});
          })
          .then(() => {
            this.onLoad(this.page.currentPage);
            this.$emit('getAllLable')
            this.$message({
              type: "success",
              message: this.$t("aicosCommon.successOperate"),
            });
          });
      } else if(command == 'deleteBatchs') {
        var ids = []
        if(this.selectionList.length == 0) {
          this.$message({
            type: "warning",
            message: this.$t("aiCenter.sensitiveWords.selectTip"),
          });
          return
        }
        this.selectionList.forEach(item=> {
          ids.push(item.id)
        })
        this.$confirm(this.$t("aiCenter.sensitiveWords.delMoreTip"), {
          confirmButtonText: this.$t("aicosCommon.confirmBtn"),
          cancelButtonText: this.$t("aicosCommon.cancelBtn"),
          type: "warning",
        })
          .then(() => {
            return deleteAiNlpLable({ids:ids.join(',')});
          })
          .then(() => {
            this.onLoad(this.page.currentPage);
            this.$emit('getAllLable')
            this.$message({
              type: "success",
              message: this.$t("aicosCommon.successOperate"),
            });
          });
      }
    },
    addEditLabel() {
      this.$refs.labelFormDataRef.validate((valid)=>{
        this.finishedFlag = true
        if(valid) {
          var info = {
            id: this.labelFormData.id,
            name: this.labelFormData.labelName,
            remark: this.labelFormData.describe,
            type: "sensitive",
          }
          saveOrUpdate(info).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: this.$t('aicosCommon.saveSuccessTip'),
              });
              this.addLabelFlag = false
              this.onLoad()
              this.$emit('getAllLable')
            }
            this.finishedFlag = false
          });
        }
      })
    },
    beforeClose() {
      this.addLabelFlag = false
      this.labelFormData.id = ''
      this.labelFormData.labelName = ''
      this.labelFormData.describe = ''
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    searchChange() {
      this.onLoad();
    },
    searchReset() {
      this.searchForm = {
        labelName:'',
      };
      this.onLoad();
    },
  }
}
</script>
<style lang="scss" scoped>

</style>
